@include('user.head')

<!-- <link rel="stylesheet" href="<%url('user/css/shengyiquancss.css')%>" /> -->
<link rel="stylesheet" href="<%url('user/css/font-awesome.min.css')%>" />
<style>
	textarea {
	  resize : none;
	}
</style>
<div class="wrapper" style="padding-top:30px;">
<div class="row">
	<div class="col-xs-9">
		<div class="wrapper-1 col-xs-12">
			<div class="bianju-wai">
			<div class="circle_bianju">
				<div>
					<img src="<%url('user/img/qiguai.png')%>" height="22" width="184" alt="" />
					<div class="geshu">还可以输入<b><i id="textCount">140</i></b>个字</div>
				</div>
				<div class="fabiao circle_bianju">
					<textarea type="text" style="height:160px;border-radius:5px;border-color:#dddddd;" class="col-xs-12" id="textMessage"></textarea>
				</div>
					<button type="button" id="fabiao" class="btn btn-info col-xs-2 pull_right">发布</button>
			</div>
			</div>
			<div id="comments">
			</div>
			<div class="fenxiang">
				<div class="weibo"><a href="javascript:void(0)"><img src="<%url('user/img/xinlang.jpg')%>" height="36" width="48" alt="" /></a></div>
				<div class="weixin"><a href="javascript:void(0)"><img src="<%url('user/img/weixin.jpg')%>" height="36" width="40" alt="" /></a></div>
			</div>
			<div class="wrapper-1">
				<div class="jiazai">
					<i class="fa fa-spinner fa-spin"></i>正在加载中，请稍后..
				</div>
			</div>
		</div>
	</div>
	<div class="col-xs-3 no_padding_both">
		<div class="col-xs-12 no_padding_left">
			<div class="panel panel-default">
				<div class="panel-heading">推荐用户</div>
				<div class="panel-body">
					@foreach($recUser as $value)
					<div class="col-xs-12" style="margin-bottom:20px;">
						<div class="col-xs-4">
							@if($value['profile']['avatar'])
							<img class="" src="<%url('images')%>/<%$value['id']%>/<%env('OTHERS_DIR')%>/<%$value['profile']['avatar']%>" height="50" width="50" alt="" />
							@else
							<img class="" src="<%url('images')%>/default/avatar.png" height="50" width="50" alt="" />
							@endif
						</div>
						<div class="col-xs-8" style="margin-top:10px;"><%$value['profile']['nickname']%></div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>
</div>
</div>
@include('user.footer')
</body>
@include('user.common')
<script type="text/html" id="comment">
{%each list as value index}
<div class="neirong" style="padding-top:15px;">
	<div class="col-xs-2 no_padding_right text-center">
		{%if value.profile.avatar}
		<img src="<%url('images')%>/{%value.uid}/others/{%value.profile.avatar}" class="img-circle" height="70" width="70" alt="" /><br>
		{%else}
		<img src="<%url('images')%>/default/avatar.png" class="img-circle" height="70" width="70" alt="" /><br>
		{%/if}
	</div>
	<div class="col-xs-10 no_padding_left">
		<div class="col-xs-12" style="font-size:16px;"><b>{%value.profile.nickname}:</b></div>
		<div class="col-xs-12" style="margin-top:5px;">{%value.content}</div>
		<!-- <div class="col-xs-12"><img src="<%url('user/img/meinv.png')%>" height="82" width="121" alt="" /></div> -->
		<div class="col-xs-12 light_gray999" style="margin-top:10px;font-size:10px;">{%noSecond(value.created_at)}</div>
	</div>
	<div class="row no_margin">
		<div class="col-xs-12">
			<div class="weibo-foot-3 col-sm-4"><a class="display_block" href="javascript:void(0)" style="text-decoration:none">分享</a></div>
			<div class="weibo-foot-1 col-sm-4" cir_id="{%value.id}"><a class="display_block" href="javascript:void(0)" style="text-decoration:none">评论({%value.comment_num})</a></div>
			<div class="weibo-foot-2 col-sm-4"><a class="display_block" href="javascript:void(0)" style="text-decoration:none"><i class="fa fa-thumbs-o-up">({%value.zan_num})</i></a></div>
		</div>
	</div>
	<div class="col-xs-12 pinglun">
		<div class="col-xs-12 plk no_padding_both">
			<div class="col-xs-10">
				<textarea class="pinglunkuang col-xs-12" type="text" style="height:40px;" /></textarea>
			</div>
			<div class="col-xs-2">
				<button type="button" class="btn btn-info weibo-1-1 doComment col-xs-12" cir_id="{%value.id}">评论</button>
			</div>
		</div>
		<div class="commentList col-xs-12" cir_id="{%value.id}">
		</div>
	</div>
</div>

{%/each}
</script>

<script type="text/html" id="commentLists">
{%each list as value index}
<div class="pinglunqu">
	<div class="pinglun-1">
		<div class="xiaonanhai">
			{%if value.profile.avatar}
			<img src="<%url('images')%>/{%value.uid}/<%env('OTHERS_DIR')%>/{%value.profile.avatar}" class="img-circle" height="40" width="40" alt="" /><br>
			{%else}
			<img src="<%url('images')%>/default/avatar.png" class="img-circle" height="40" width="40" alt="" /><br>
			{%/if}
		</div>
		<div class="pinglun-1-1">
			<div class="pinglun-2">
				<div class="">
					<b>{%value.profile.nickname}:</b>
				</div>
				<div class="">
					{%value.content}
				</div>
			</div>
			<div class="shijian-1">
				<span style="font-size:10px;" class="light_gray999">
					{%noSecond(value.created_at)}
				</span>
				<div class="weibo-1">
					<ul>
						<!-- <li class="geshu-1"><span><a href="javascript:void(0)" style="text-decoration:none">举报</a></span></li>
						<li class="geshu-1"><span><a href="javascript:void(0)" style="text-decoration:none">回复</a></span></li>
						<li class="geshu-1"><span><a href="javascript:void(0)" style="text-decoration:none"><i class="fa fa-thumbs-o-up">152</i></a></span></li>-->
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
{%/each}
{%if count > 10}
<div class="shangxiaye">
	<div class="shangyiye fl">
		<a href="javascript:void(0)" class="upPage" style="text-decoration:none;">
			<i class="fa fa-chevron-left"></i>
			<span class="daxiao" id="previous_page">上一页</span>
		</a>
	</div>
	<div class="xiayiye fr">
		<a href="javascript:void(0)" class="nextPage" style="text-decoration:none;">
			<span class="daxiao" id="next_page">下一页</span>
			<i class="fa fa-chevron-right"></i>
		</a>
	</div>
</div>
{%/if}
<div class="clearfix"></div>
</script>


<script type="text/javascript">
var page = 1;
var row = 10;
var cur_page = 0;
var total_page = 0;
var baseURL = "";
$.get(baseURL + "business/get_message", {page : page, row : row}, function (data){
	var html = template("comment", {list: data.data});
	$("#comments").append(html);
	bindShow();
	doComment();
})
function bindShow()
{
	$(".weibo-foot-1").bind("click", function(){
		_this = $(this);
		if(_this.parents(".row").first().next().is(":visible")){
			(_this.parents(".row").first()).next().hide();
			return;
		}
		$(_this.parents(".row")[0]).next().show();
		var cir_id = _this.attr("cir_id");
		$.get(baseURL + "business/get_comment", {page : 1, row : row, cir_id : cir_id},
			function (data){
			total_page = Math.ceil(data.count / row);
			var html = template("commentLists", {list: data.data, count: data.count});
			// console.log(data.count)
			// console.log(data.data)
			_this.parents(".neirong").find(".commentList").html(html);
			_this.parents(".neirong").find(".commentList").attr("cur_page", 1);
			_this.parents(".neirong").find(".commentList").attr("total_page", total_page);
			$(".upPage").hide();
			$(".upPage").unbind("click", commentPrevPage);
			$(".nextPage").unbind("click", commentNextPage);
			$(".upPage").bind("click", commentPrevPage);
			$(".nextPage").bind("click", commentNextPage);
		});
	});
}

function get_news(){
	$.get(baseURL + "business/get_comment",{page : curPage,row : row,cir_id : cir_id},function (data)
	{
		var html = template("commentLists", {list: data.data, count: data.count});
		commentList.html(html);
		commentList.attr("total_page",total_page);
		isLoading = false;
		var nextPage = commentList.children(".shangxiaye").find(".nextPage");
		var prevPage = commentList.children(".shangxiaye").find(".upPage");
		if(curPage >= total_page){
			nextPage.hide();
			prevPage.show();
		};
		if(curPage <= 1){
			nextPage.show();
			prevPage.hide();
		}
		prevPage.unbind("click", commentPrevPage);
		nextPage.unbind("click", commentNextPage);
		prevPage.bind("click", commentPrevPage);
		nextPage.bind("click", commentNextPage);
	})

}

var curPage,cir_id,commentList;
var isLoading = false;
function commentPrevPage()
{
	if(isLoading) return;
	var curNode = $(this);
	isLoading = true;
	commentList = curNode.parents(".commentList");
	cir_id = commentList.attr("cir_id");
	curPage = commentList.attr("cur_page");
	if(curPage > 1){
		curPage--;
		commentList.attr("cur_page", curPage);
		if(curPage < 1){
			curNode.hide();
		}
		get_news();
	}
}


function commentNextPage()
{
	if(isLoading) return;
	var curNode = $(this);
	isLoading = true;
	commentList = curNode.parents(".commentList");
	cir_id = commentList.attr("cir_id");
	curPage = commentList.attr("cur_page");
	if(curPage <= total_page){
		curPage++;
		commentList.attr("cur_page", curPage);
		if(curPage >= total_page){
			curNode.hide();
		}
		get_news();
	}
	// if(isLoading) return;
	// isLoading = true;
	// if(curPage >= 1 && curPage < totalPage)
	// {
	// 	curPage++;
	// 	curNode.show();
	// 	curNode.parent().prev().children(".upPage").show();
	// 	commentList.attr("cur_page",curPage);
	// }
	// if(curPage >= total_page ){
	// 	curNode.hide();
	// 	console.log(curNode,2)
	// 	curNode.parent().prev().children(".upPage").show();
	// }
	// get_news(curPage,cirId,curNode);
}


var cir_id;
var commentNode;
var commentIsSubmit = false;
function doComment()
{
	$(".doComment").bind("click", function (){
		if(commentIsSubmit) return;
		commentIsSubmit = true;
		var _this = $(this);
		cir_id = _this.attr("cir_id");
		commentNode = _this.parent().siblings().children(".pinglunkuang");
		var content = commentNode.val().trim();
		if(content == '')
		{
			commentIsSubmit = false;
			warning("", "评论内容不能为空!");
			return;
		}
		$.post(baseURL + "business/add_comment", {cir_id : cir_id, content : content}, function (data){
			commentIsSubmit = false;
			if(data.success){
				var html = template("commentLists", {list: data.data});
				var commentList = $("div[cir_id='" + cir_id + "']").parents(".no_margin").next().find(".commentList");
				commentList.prepend(html);
				if(commentList.find(".pinglunqu").length > 10){
					window.location.reload();
				}
				// commentList.find(".pinglunqu").last().remove();
				commentNode.val("");
			}
			else
			{
				warning("", "请先登录");
			}
		});
	})
}



$("#fabiao").click(function(){
	var text = $("#textMessage").val().trim();
	if(text == ''){
		warning("", "发布内容不能为空！");
		return;
	}
	if(Math.ceil(textNum(text)) > 140)
	{
		warning("", "输入内容不得超过140个字！");
		return;
	}

	$.post(baseURL + "business/add_message", {message : text}, function (data){
		if(data.success)
		{
			$("#textMessage").val('');
			var html = template("comment", {list: data.data});
			$("#comments").prepend(html);
			$(".weibo-foot-1").unbind("click");
			bindShow();
			$(".doComment").unbind("click");
			doComment();
			success("", "发布成功！");
		}
		else
		{
			warning("", "请先登录");
		}
	})
})



$("#textMessage").keyup(function(){
	var str = $(this).val();
	var count = Math.ceil(textNum(str));
	$("#textCount").html(140 - count);
	if(count > 140)
	{
		$("#textCount").css({'color':'red'});
	}
	else
	{
		$("#textCount").css({'color':'#333333'});

	}

})



	$(".weibo-foot-1").bind("click", function(){
		var x =	$(this).parents(".weibo-foot").next().css("display")
		if ( x == "none")
		 	{
		 		$(this).parents(".weibo-foot").next().css("display","block");
		 		x = "block";
		 	}
		 else
		 	{
		 		$(this).parents(".weibo-foot").next().css("display","none");
		 		x = "none";
		 	}
	});


		var y = $(".nichen").length;
			$	(function(){
			var a = $(".nichen").html();
			if( y >= 14)
			{
				var b = a.substr(0,14);
				console.log(b);
				$(this).html(b+"...");
			}
			else
			{

			}
		});
		$(function(){
  			$(".weibo-foot-3").mouseover(function(){
        	$(".fenxiang").stop().show(200);
    		});
   			$(".weibo-foot-3").mouseout(function(){
			$(".fenxiang").stop().hide(200);
   			});
		})
	islodding = true;
	$(document).ready(function() {
    $(window).scroll(function() {
        // $(document).scrollTop() 获取垂直滚动的距离
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            $(".jiazai").css("display","block");
            page++;
            if (!islodding){
            	return;
            }
            $.get(baseURL + "business/get_message",{page:page,row:20},function (data){
            	islodding = false;
            	if(data.data){
            		 $(".jiazai").css("display","none");
            	}
			var html = template("comment", {list: data.data});
			$("#comments").append(html);
			$(".weibo-foot-1").unbind("click");
			bindShow();
			$(".doComment").unbind("click");
			doComment();
			islodding = true;
			})
        }
    })
});
</script>
</html>
